<template>
	<a-modal :visible="visible" title="音频配置" :bodyStyle="{
		padding: '0px 20px',
	}" @cancel="cancelClick" :footer="null" :width="1000" :destroyOnClose="true">
		<a-card :bordered="false">
			<div class="dubbing">
				<a-tabs v-model:activeKey="activeKey" @change="activeChange">
					<a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.value" />
				</a-tabs>
				<a-spin tip="加载中..." :spinning="loading">
					<div class="voice-content hide-scroller-bar">
						<div class="n-tab-pane" v-for="voice in voiceList" :key="voice.gender_type">
							<div class="group-name">{{ voice.gender_title }}：</div>
							<a-row style="flex: 1" :wrap="true">
								<a-col v-for="item in voice.item" :key="item.id" @click="voiceClick(item)">
									<div class="group-box" :class="
										timbreId == item.timbre_id ? 'group-border' : ''
									">
										<div class="right-badge" v-if="item.quality == 2">
											<cu-icon type="icon-zuanshihuiyuan" style="font-size: 18px" />
											精品
										</div>
										<div class="avatar">
											<a-avatar :src="item.img" />
											<div class="mask" @click="playbackClick(item)">
												<cu-icon class="icon" :type="
													!item.isPlay ? 'icon-bofang1' : 'icon-zanting'
												" />
											</div>
										</div>
										<div>
											<div>{{ item.name }}</div>
											<div>{{ item.human_style }}</div>
										</div>
									</div>
								</a-col>
							</a-row>
						</div>
					</div>
				</a-spin>
			</div>
			<div class="voice">
				<a-row align="middle" :gutter="[0, 16]">
					<a-col :span="24">
						<div class="voice-item">
							<div class="copywriting-title">语气：</div>
							<a-select v-model:value="emotion_category" placeholder="请选择" style="width: 100%"
								:disabled="toneDisabled">
								<a-select-option v-for="item in toneList" :value="item.key" :key="item.key">
									{{ item.value }}
								</a-select-option>
							</a-select>
						</div>
					</a-col>
					<a-col :span="24">
						<a-space>
							<div>语速：</div>
							<a-slider v-model:value="speed" :max="2" :min="-2" />
							<a-input-number id="inputNumber" v-model:value="speed" :min="-2" :max="2" size="small"
								style="width: 60px; margin-left: 30px" />
						</a-space>
					</a-col>
	
					<a-col :span="24">
						<a-space>
							<div>音量：</div>
							<a-slider v-model:value="volume" :max="11" :min="1" style="margin-right: 120px" />
							<a-input-number id="inputNumber" v-model:value="volume" :min="1" :max="11" size="small"
								style="width: 60px; margin-left: 30px" />
						</a-space>
					</a-col>
					<a-col :span="24">
						<a-space>
							<div>情感：</div>
							<a-slider v-model:value="emotion_intensity" :max="200" :min="50" />
							<a-input-number id="inputNumber" v-model:value="emotion_intensity" :max="200" :min="50"
								size="small" style="width: 60px; margin-left: 30px" />
						</a-space>
					</a-col>
				</a-row>
			</div>
		</a-card>
		<div class="footer">
			<div class="operation">
				<div class="flex align-center" @click="saveAudio">
					<a-button type="primary">保存</a-button>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		nextTick,
		watch,
		ref,
		h,
		computed,
	} from "vue";
	import {
		CaretRightOutlined,
		PauseCircleFilled,
		LoadingOutlined,
	} from "@ant-design/icons-vue";
	import {
		message
	} from "ant-design-vue";
	import dayjs from "dayjs";
	import request from "../../../../../../common/utils/request";

	export default defineComponent({
		name: "AddDubbing",
		components: {
			CaretRightOutlined,
			PauseCircleFilled
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
		},
		setup(props, {
			emit
		}) {
			const state = reactive({
				// 语气
				emotion_category: "",
				toneList: [],
				toneDisabled: true,
				// 语速
				speed: 0,
				// 音频情感程度
				emotion_intensity: 150,
				// 音量
				volume: 5,

				loading: false,
				activeKey: "",
				tabList: [],
				voiceList: [],
				voiceData: {},
				timbreId: 0,

				isPlay: true,
				audioPlayer: null,
			});

			const getList = () => {
				state.loading = true;
				request
					.get("/work_ai", "/user/shotstack/voice/category")
					.then((res) => {
						state.tabList = res.result;
						state.activeKey = res.result[0].key;
						state.loading = false;
						getVoiceList();
					})
					.catch(() => {
						state.loading = false;
					});
			};

			const getVoiceList = () => {
				state.loading = true;
				request
					.get("/work_ai", "/user/shotstack/voice/list", {
						category: state.activeKey,
					})
					.then((res) => {
						if (res.result.length) {
							state.voiceData = res.result[0].item[0];
							state.timbreId = res.result[0].item[0].timbre_id;
							state.toneList = res.result[0].item[0].emotion_style;
							res.result.forEach((item) => {
								item.item.forEach((sub) => {
									sub.isPlay = false;
								});
							});
							state.voiceList = res.result;
							state.emotion_category = res.result[0].item[0].emotion_style[0].key;
							if (res.result[0].item[0].emotion_style.length == 1) {
								state.toneDisabled = true;
								state.loading = false;

								return;
							}
							state.toneDisabled = false;
						}
						state.loading = false;
					});
			};

			const voiceClick = (data) => {
				state.voiceData = data;
				state.timbreId = data.timbre_id;
				state.emotion_category = data.emotion_style[0].key;
				state.toneList = data.emotion_style;
				if (data.emotion_style.length == 1) {
					state.toneDisabled = true;
					return;
				}
				state.toneDisabled = false;
			};

			const activeChange = () => {
				getVoiceList();
			};

			// 播放/暂停
			const playbackClick = (data) => {
				data.isPlay = !data.isPlay;
				if (data.isPlay) {
					if (state.audioPlayer) {
						state.audioPlayer.pause(); // 暂停当前播放的音频
						state.audioPlayer.src = "";
					}
					state.audioPlayer = new Audio(data.voice_url); // 播放下一个音频文件
					state.audioPlayer.play(); // 开始播放音频
				} else {
					state.audioPlayer.src = "";
					state.audioPlayer.pause();
				}
				state.voiceList.forEach((voice) => {
					if (voice.item) {
						voice.item.forEach((item) => {
							if (item.id !== data.id) {
								item.isPlay = false;
							}
						});
					}
				});
				if (state.audioPlayer) {
					state.audioPlayer.addEventListener("ended", function() {
						// 这里写入结束回调函数的代码
						state.voiceList.forEach((voice) => {
							if (voice.item) {
								voice.item.forEach((item) => {
									if (item.id == data.id) {
										item.isPlay = false;
									}
								});
							}
						});
					});
				}
			};
			
			const saveAudio = () => {
				let obj = {}
				obj['speed'] = state.speed
				obj['emotion_intensity'] = state.emotion_intensity
				obj['volume'] = state.volume
				obj['emotion_category'] = state.emotion_category
				state.voiceList.map(type_item=>{
					type_item?.item.map(audio_item=>{
						if(audio_item.timbre_id == state.timbreId){
							obj['audio'] = audio_item
						}
					})
				})
				emit('saveAudio', obj)
			}

			const cancelClick = () => {
				emit('saveAudio')
			};

			watch(
				() => props.visible,
				(val) => {
					if (val) {
						getList();
					} else {
						state.isPlay = true;
						state.speed = 0;
						state.emotion_intensity = 150;
						state.volume = 5;
					}
				}
			);
			return {
				...toRefs(state),
				playbackClick,
				activeChange,
				voiceClick,
				cancelClick,
				saveAudio
			};
		},
	});
</script>

<style lang="less" scoped>
	button {
		border-radius: 5px;
	}

	:deep(.ss-select-selector) {
		border-radius: 0 5px 5px 0 !important;
	}

	.dubbing {
		width: 100%;
	}

	.copywriting {
		display: flex;
		margin-bottom: 20px;
	}

	.copywriting-title {
		display: flex;
		width: 60px;
		padding: 12px 0;
	}

	.ss-card {
		border-radius: 10px;
		margin: 5px 0;
	}

	.voice-content {
		width: 100%;
		height: 210px;
		overflow: auto;
	}

	.n-tab-pane {
		display: flex;
		.group-box {
			display: flex;
			align-items: center;
			width: 185px;
			height: 75px;
			padding: 30px 15px;
			margin-bottom: 20px;
			margin-right: 20px;
			border-radius: 5px;
			border: 1px solid #d9d9d9;
			cursor: pointer;
			position: relative;
			&.group-border {
				border: 1px solid #436ba0;
			}
			.avatar {
				margin-right: 5px;
			}
			.mask {
				position: absolute;
				top: 21px;
				left: 15px;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);

				.icon {
					margin-left: 8px;
					margin-top: 6px;
					color: #fff;
					font-size: 18px;
				}

				display: none;
			}
			:hover {
				.mask {
					display: block;
				}
			}
			.right-badge {
				position: absolute;
				top: 0;
				right: 0;
				width: auto;
				height: 20px;
				padding: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 12px;
				border-radius: 2px;
				background: #ff9c00;
			}
		}
	}

	:deep(.ss-radio-wrapper) {
		margin-right: 0px;
	}
	.ss-radio-group {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.group-name {
		width: 80px;
	}
	.voice {
		margin-top: 15px;
		margin-bottom: 30px;
	}
	.voice-item {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.ss-slider {
		width: 780px;
	}
	.operation {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px;
		.auto-box {
			margin-right: 10px;
		}
	}
	:deep(.ss-card-body) {
		padding-top: 0;
	}
	.footer {
		width: 100%;
		text-align: center;
	}
	:deep(.ss-slider) {
		width: 750px;
	}
</style>